import { CustomSubTitle } from "@/components/customTitle";
import CustomTag from "@/components/tag";
import vipBookingStore from "@/store/vipbookingStore";
import { CheckCircleOutlined } from "@ant-design/icons";
import { ProFormText } from "@ant-design/pro-components";
import { Descriptions, Divider } from "antd";

const BasicInfo = () => {
  const { vipBookingData } = vipBookingStore();
  console.log(vipBookingData, "vipBookingData");
  return (
    <>
      <CustomSubTitle>Basic Information</CustomSubTitle>
      <Descriptions layout="vertical">
        <Descriptions.Item label="Full Name (English)">
          {vipBookingData?.basicInfo?.enName || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="Full Name (Chinese)">
          {vipBookingData?.basicInfo?.cnName || "-"}{" "}
        </Descriptions.Item>
        <Descriptions.Item label="Email">
          {vipBookingData?.basicInfo?.email || "-"}
        </Descriptions.Item>
        <Descriptions.Item label={"Mobile"} span={1}>
          <ProFormText
            className=""
            name="mobile"
            initialValue={vipBookingData?.basicInfo?.mobile || "-"}
            fieldProps={{
              prefix: "+852",
              size: "large",
              // defaultValue: vipBookingData?.basicInfo?.mobile || "-",
            }}
          ></ProFormText>
        </Descriptions.Item>
      </Descriptions>
      <Divider plain></Divider>
    </>
  );
};

export default BasicInfo;
